<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /*首字母 特殊效果*/
        /*
        伪元素：
            表示页面中一些特殊的并不真实存在的元素（特殊的位置）
            ::first-letter 表示第一个字母
            ::first-line 表示第一行
            ::selection 表示选中的内容

            ::before    表示元素的开始位置
            ::after     表示元素的最后
                after 和 before 必须结合content属性来使用
        */
        p::first-letter {
            font-size: 20px;
        }
        p::first-line {
            background-color: yellow;
        }
        p::selection {
            background-color: greenyellow;
        }
        div::before {
            content: "abc";
            color: red;
        }
        div::after {
            content: "test";
            color: red;
        }
        p:last-of-type::after {
            content: "结束";
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        Hello Hello How are you
    </div>
    <p>
        Lorem hfkah asdhk asdhkjasd ahkdh hasdh zncnb
        Aorem hfkah asdhk asdhkjasd ahkdh hasdh zncnb
        Aorem hfkah asdhk asdhkjasd ahkdh hasdh zncnb
        Aorem hfkah asdhk asdhkjasd ahkdh hasdh zncnb
        Aorem hfkah asdhk asdhkjasd ahkdh hasdh zncnb
    </p>
    <p>
        Aorem hfkah asdhk asdhkjasd ahkdh hasdh zncnb
    </p>
    <p>
        Borem hfkah asdhk asdhkjasd ahkdh hasdh zncnb
    </p>

</body>
</html>